import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, Alert, Keyboard } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import RadioButton from '../../../../components/form/radioButton';
import ToastUtil from '../../../../utils/toast';
let titleImgObj = require('../../../../imgs/global/query.png');
const scale = GLOBAL.SCALE;
export class RadiusGroupCpt extends Component {
	constructor(props) {
		super(props);
		let { selectedKey } = this.props.data || {};
		this.state = {
			selectedKey
		}
	}

	componentWillReceiveProps (props) {
		let { selectedKey } = props.data || {};
		this.setState({
			selectedKey
		})
	}

	//问号 功能在开发
	titleImgCallBack = () => {
		let { companyId, orderType, navigation } = this.props.data.icon || {};
		let lsTitle = orderType == 'P' ? '供应商' : '客户';
		let lsType = orderType == 'P' ? '保证金/定金、款到发货只' : '货到付款、票到付款';

		Alert.alert('提示', `${lsTitle}${lsType}有授信的企业才能选择该选项,可去申请企业授信`, [
			{
				text: '知道了',
			}, {
				text: '申请授信',
				onPress: () => {

					if (!companyId) {
						ToastUtil.showWarning('请先选择' + lsTitle);
						return
					}
					navigation.navigate('CreditFormPage', { companyId, orderType })
				}
			}
		])
	}

	render () {
		let { listData, _radiusItemFn, title, required, id, radioBox, type, icon, textStyleBox, orderType, radioStyle, goodsData, lsData, radioTitle, disable } = this.props.data || {};
		let { selectedKey } = this.state;
		return (
			<View style={[styles.radioBox, radioBox || null, disable ? styles.disableStyle : null]}>
				{
					title ? (
						<View>
							<Text style={[styles.radioTitle, radioTitle || null]} >
								{
									required ? <Text style={styles.required}>* </Text> : null
								}
								{title || ''}
							</Text>
							{icon ? <TouchableOpacity onPress={this.titleImgCallBack} style={{ paddingLeft: 23 * scale, marginTop: 6 * scale }}><Image source={titleImgObj}></Image></TouchableOpacity> : null}
						</View>) : null
				}

				<View style={[styles.radioView, radioStyle || null]}>
					{
						listData && listData.map((item, index) => {
							return (
								<RadioButton key={index}
									radioValue={item.dictName}
									disable={disable || false}
									radioKey={item.dictKey}
									buttonStyle={styles.buttonStyle}
									selectedKey={selectedKey}
									type={type}
									textStyleBox={textStyleBox}
									icon={('Q' == item.dictKey && orderType == 'P') || ('P' == item.dictKey && orderType == 'S')}
									selectedChange={(key, value) => {
										Keyboard.dismiss();
										//业务类型
										if (id == 'isUnite' && goodsData && goodsData.length) {  // 
											Alert.alert('提示', `切换业务类型商品将清空`, [
												{
													text: '确认', onPress: () => {
														this.setState({
															selectedKey: key
														}, () => {
															_radiusItemFn && _radiusItemFn(key, id, index, 'clearGoods', lsData)
														})
													}
												},
												{
													text: '取消', onPress: () => {
														console.log('	取消')
													}
												},
											]);
										} else {
											this.setState({
												selectedKey: key
											}, () => {
												_radiusItemFn && _radiusItemFn(key, id, index, type, lsData)
											})
										}

									}} />
							)
						})
					}
				</View>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	radioBox: {
		flexDirection: 'row',
		marginTop: 15 * scale
	},
	radioView: {
		flexDirection: 'row',
		alignItems: 'center',
		flexWrap: 'wrap',
		paddingLeft: 13 * scale,
		paddingRight: 5 * scale,
		width: 260 * scale
	},
	radioTitle: {
		fontSize: 14 * scale,
		color: '#333',
		paddingLeft: 13 * scale,
	},
	buttonStyle: {
		marginBottom: 10 * scale
	},
	required: {
		fontSize: 14 * scale,
		color: '#D0021B'
	},
	disableStyle: {
		opacity: .5
	}
})